<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="index" align="center" label="编号" width="90">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>

      <el-table-column type="index" align="center" label="订单编号" width="150">
        <template slot-scope="scope">
          {{ scope.row.num }}
        </template>
      </el-table-column>
      
      <el-table-column align="center" prop="created_at" label="提交时间编号" width="150">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.graduate_time }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品信息" property="imgUrl" align="center" width="130px">

        <template #default="scope">
          <div class="flex-box">
            <div style="width: 120px; height: 120px" align="center">      <!-- 设置图片大小 -->
              <el-image :src="scope.row.imgUrl" fit="fill"> </el-image>
            </div>
            
            <div>{{ scope.row.Image }}</div>
          </div>
        </template>
        
      </el-table-column>

      <el-table-column label="用户账号" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.Account }}</span>
        </template>
      </el-table-column>

      <el-table-column label="订单金额" property="price" align="center" width="90">
        <template slot-scope="scope">
          {{scope.row.price }}
        </template>
      </el-table-column>

       <el-table-column label="支付方式" property="pay" align="center" width="90">
        <template slot-scope="scope">
          {{scope.row.pay }}
        </template>
      </el-table-column>

       <el-table-column label="订单来源" property="source" align="center" width="90">
        <template slot-scope="scope">
          {{scope.row.source }}
        </template>
      </el-table-column>

       <el-table-column label="订单状态" property="state" align="center" width="90">
        <template slot-scope="scope">
          {{scope.row.state }}
        </template>
      </el-table-column>

       
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <div class="flex-box">
            <el-button type="success" size="mini" @click="ViewOrdes(row)">查看订单</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除订单</el-button>

          </div>
        </template>
      </el-table-column>


    </el-table>

    <!-- <div style="float: right; margin: 10px">
      <span
        >商品总数： {{ this.items.number }}件 , 合计（不含运费）： ¥
         </span
      >
    </div> -->
  </div>
</template>

<script>
import { getList } from "@/api/shopping";


export default {
 
  data() {
    return {
      list: null,
      listLoading: true,
      items: [],
      
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        this.list = response.data.items;
        this.listLoading = false;
      });
    },
    handleDelete(index,row) {
        this.list.splice(index, 1)
                
        this.$notify({
        title: '操作',
        message: '删除成功',
        type: 'success',
        duration: 2000
       })
    },
    ViewOrdes(){
      console.log("订单信息")
      this.$router.push('/shopping/orders')
    }
  }
}
</script>
